<html>
	<head>
		<title>go webassembly - canvas</title>
		<script src="wasm_exec.js"></script>
		<script>
			const go = new Go();
			WebAssembly.instantiateStreaming(fetch('main.wasm'),go.importObject).then( res=> {
				go.run(res.instance)	
			})
			window.onload = function() {
				linkRange('size','size-value')
			}
			function linkRange(id, idValue) {
				let El = document.getElementById(id)
				let valEl = document.getElementById(idValue)
				El.addEventListener("input", function() { valEl.innerHTML = El.value })
				valEl.innerHTML = El.value
			}
	
		</script>
	<style>
		body{background: #eee; overflow:auto}
		body,pre { margin:0;padding:0; }
		#mycanvas { background: #fff; /*width: 100%; height:100%;*/ top:0;left:0; }
		.control-group {
			display:flex;
			align-items:center;
			justify-content: flex-start;
			margin-top:10px;
		}
		.control-group label { flex:0; flex-shrink:0; flex-basis: 50px; }
		.control-group input { flex-grow:0; }
		.control-group input[type=color] { 
			-webkit-appearance: none;
			width:100%; 
			border:none; 
		}
		input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
		input[type="color"]::-webkit-color-swatch { border: none; }
		.control-group span { text-align:center; width:50px;}
		.control {
			position:fixed;
			padding:20px;
			background: rgba(0,0,0,0.4);
			color:#FFF;
			top:0;right:0;
		}
		#status { font-size: 1.3em; padding-bottom:20px;}
		hr {border-color:#555}
		a.source {color:#fff;display:block;padding:10px 20px 0px 20px;text-align:right;}

	</style>
	</head>
	<body>
		<canvas id="mycanvas" width="1920" height="1080"></canvas>
		<div class="control">
			<div id="status">
				connecting...
			</div>
			<div class="control-group">
				<label>color</label><input id="color" type="color">
			</div>
			<div class="control-group">
				<label>size</label><input id="size" type="range" min="6" max="200" value="6"> <span id="size-value">6</span>
			</div>
			<a class="source" href="https://github.com/stdiopt/gowasm-experiments/tree/master/arty" target="_blank">[source code]</a>
		</div>

	</body>
</html>
